<script setup lang="js">
import { reactive, ref } from 'vue';
import { queryHealthSteward, queryCustomerWithoutSteward, queryServingCustomerById, deleteServingCustomer } from '@/api/healthApi';

// 表格中的数据
let tableData = reactive([]);
let leftTableData = reactive([]);  // 左侧新表格的数据
let rightTableData = reactive([]);  // 右侧新表格的数据

// 传递给后端的数据格式
let queryParam = reactive({
  pageInfoVo: {
    currentPage: 1,
    pageSize: 5,
    total: 0,
    pageNum: 0
  },
  user: {
    nickname: "",
  },
  customer: {
    customerName: "",
  }
});

let isSettingSteward = ref(false); // 用于控制是否显示设置服务对象页面

// 获取表格数据
function HealthStewardInfoData() {
  queryHealthSteward(queryParam)
    .then(res => {
      console.log(res);
      if (res.code == 200) {
        // 分页数据的设置
        queryParam.pageInfoVo.currentPage = res.data.currentPage;
        queryParam.pageInfoVo.pageSize = res.data.pageSize;
        queryParam.pageInfoVo.total = res.data.total;
        queryParam.pageInfoVo.pageNum = res.data.pageNum;

        // 清空数组中的数据
        tableData.splice(0, tableData.length);

        // 填充表格中的数据
        tableData.push(...res.data.data);
      }
    });
}
HealthStewardInfoData();

// 获取左侧表格数据
function fetchLeftTableData() {
  queryCustomerWithoutSteward(queryParam)
    .then(res => {
      if (res.code === 200) {
        queryParam.pageInfoVo.currentPage = res.data.currentPage;
        queryParam.pageInfoVo.pageSize = res.data.pageSize;
        queryParam.pageInfoVo.total = res.data.total;
        queryParam.pageInfoVo.pageNum = res.data.pageNum;
        leftTableData.splice(0, leftTableData.length);  
        leftTableData.push(...res.data.data);  
      }
    });
}

// 分页事件
function handleCurrentChange(val) {
  queryParam.pageInfoVo.currentPage = val;
  // 重新获取表格中的信息
  HealthStewardInfoData();
}

// 点击上一页
function handlePrevClick(val) {
  queryParam.pageInfoVo.currentPage = val;
  // 重新获取表格中的信息
  HealthStewardInfoData();
}

// 点击下一页
function handleNextClick(val) {
  queryParam.pageInfoVo.currentPage = val;
  // 重新获取表格中的信息
  HealthStewardInfoData();
}

// 按钮的查询事件
function btnQuery() {
  HealthStewardInfoData();
}

// 点击“设置服务对象”按钮
function exchange(row) {
  isSettingSteward.value = true;
  fetchLeftTableData();  // 获取左侧表格数据
}
</script>

<template>
  <!-- 显示标题 -->
  <div style="margin-left: 70px;">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">健康管家</el-breadcrumb-item>
      <el-breadcrumb-item>设置服务对象</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <div class="common-layout" style="overflow-x: hidden;">
    <el-container style="margin-top: 25px;">
      <el-header>
        <div style="margin-left: 50px">
          <el-row>
            <el-col :span="5">
              <el-form-item label="姓名：">
                <el-input clearable v-model="queryParam.user.nickname"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-button @click="btnQuery" type="primary">查询</el-button>
            </el-col>
          </el-row>
        </div>
      </el-header>

      <el-divider style="margin:0;margin-left: 48px;"></el-divider>

      <!-- 主要区域容器 -->
      <el-main style="margin-left: 28px">
        <!-- 如果没有点击“设置服务对象”，显示原有的表格 -->
        <div v-if="!isSettingSteward">
          <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column align="center" type="index" label="序号" width="180" />
            <el-table-column align="center" prop="nickname" label="姓名" width="180" />
            <el-table-column align="center" prop="phoneNumber" label="电话" width="250" />
            <el-table-column align="center" prop="sex" label="性别" width="180">
              <template #default="scoped">
                {{ scoped.row.customerSex == 0 ? '男' : '女' }}
              </template>
            </el-table-column>
            <el-table-column align="center" prop="email" label="邮箱" width="250" />
            <el-table-column align="center" prop="date" label="操作" width="250">
              <template #default="scoped">
                <el-button type="primary" size="small" @click="exchange(scoped.row)">设置服务对象</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 如果点击了“设置服务对象”，显示两个并列的表格 -->
        <div v-if="isSettingSteward" style="margin-left:50px;">
          <el-row>
            <!-- 左侧表格 -->
            <el-col :span="12">
              <el-table :data="leftTableData" stripe style="width: 80%">
                <el-table-column align="center" type="index" label="序号" width="60" />
                <el-table-column align="center" prop="customerName" label="客户姓名" width="80" />
                <el-table-column align="center" prop="customerAge" label="年龄" width="60" />
                <el-table-column align="center" prop="customerSex" label="性别" width="60">
                  <template #default="scoped">
                    {{ scoped.row.customerSex == 0 ? '男' : '女' }}
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="roomNo" label="房间号" width="80" />
                <el-table-column align="center" prop="bedId" label="床号" width="60" />
                <el-table-column align="center" prop="levelId" label="护理级别" width="80" />
              </el-table>
            </el-col>
          </el-row>
          <!-- 分页 -->
        <el-pagination
          v-if="isSettingSteward"
          style="position: fixed; margin-left: 10px;margin-top: 25px;"
          background
          :page-size="queryParam.pageInfoVo.pageSize"
          layout="prev, pager, next"
          :total="queryParam.pageInfoVo.total"
          @current-change="handleCurrentChange"
          @prev-click="handlePrevClick"
          @next-click="handleNextClick"
        />
          </div>
          <div v-if="isSettingSteward" style="margin-left:600px;margin-top:-101px">
            <el-row>
            <!-- 右侧表格 -->
            <el-col :span="12">
              <el-table :data="rightTableData" stripe style="width: 100%;min-width: 700px;">
                <el-table-column align="center" type="index" label="序号" width="60" />
                <el-table-column align="center" prop="nickname" label="客户姓名" width="80" />
                <el-table-column align="center" prop="phoneNumber" label="年龄" width="60" />
                <el-table-column align="center" prop="sex" label="性别" width="60">
                  <template #default="scoped">
                    {{ scoped.row.customerSex == 0 ? '男' : '女' }}
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="email" label="房间号" width="80" />
                <el-table-column align="center" prop="email" label="床号" width="60" />
                <el-table-column align="center" prop="email" label="护理级别" width="80" />
                <el-table-column align="center" prop="date" label="操作" width="80">
              <template #default="scoped">
                <el-button type="primary" size="small" @click="exchange(scoped.row)">移除</el-button>
              </template>
            </el-table-column>
              </el-table>
            </el-col>
          </el-row>
          <!-- 分页 -->
        <el-pagination
          v-if="isSettingSteward"
          style="position: fixed; margin-left: 10px;margin-top: 25px;"
          background
          :page-size="queryParam.pageInfoVo.pageSize"
          layout="prev, pager, next"
          :total="queryParam.pageInfoVo.total"
          @current-change="handleCurrentChange"
          @prev-click="handlePrevClick"
          @next-click="handleNextClick"
        />
        </div>

        <!-- 分页 -->
        <el-pagination
          v-if="!isSettingSteward"
          style="position: fixed; margin-left: 10px;margin-top: 25px;"
          background
          :page-size="queryParam.pageInfoVo.pageSize"
          layout="prev, pager, next"
          :total="queryParam.pageInfoVo.total"
          @current-change="handleCurrentChange"
          @prev-click="handlePrevClick"
          @next-click="handleNextClick"
        />
      </el-main>
    </el-container>
  </div>
</template>

<style lang="css" scoped>
</style>
